<!--每月医废产量峰值-->
<template>
    <div class="monthly-peak">
        <div class="chart" id="chart_right2"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import { getAction } from '@/api/manage'
    export default {
        name: 'monthlyPeak',
        data() {
            return {
                xdata: [],
                ydata:[]
            }
        },
        mounted() {
            this.getStatisticsData()
        },
        methods: {
            async getStatisticsData() {
                let res = await getAction('/hc/Statistical/returnWeightByMonth')
                if (res && res.success) {
                    this.dataSource = res.result || [];
                    this.xdata = this.dataSource.map((item) => item.yearAndMonth);
                    this.ydata = this.dataSource.map((item) => (item.sum/1000).toFixed(2));
                }
                this.getEchartRight2()
            },
            getEchartRight2() {
                let myChart = this.$echarts.init(document.getElementById('chart_right2'));

                let option = {
                    xAxis: {
                        data: this.xdata,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 30,
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        }
                    },
                    yAxis: {
                        color: '#fff',
                        name: '单位：吨',
                        nameTextStyle: {
                            color: '#ffffff',
                            align: 'center',
                            fontSize: 14,
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 12
                            }
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}<br />{c0}吨',
                        axisPointer: {
                            type: 'line'
                        },
                        textStyle: {
                            color: '#fff'//'rgba(24,23,255,1)'
                        }
                    },
                    series: [
                        {
                            type: 'line',
                            symbol: 'circle',
                            symbolSize: 10,
                            smooth: true,
                            data: this.ydata,
                            itemStyle: {
                                //拐点的样式
                                color: 'rgba(244,253,255,1)',
                                borderWidth: 1,
                                borderColor: 'rgba(87, 183, 242, 1)'
                            },
                            lineStyle: {
                                //线条的样式
                                width: 3,
                                color: 'rgba(87, 183, 242, 1)'
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(87, 183, 242, 1)' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(6,37,55,0)' // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        }
                    ]
                }

                myChart.setOption(option, true)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .monthly-peak {
        .chart {
            height: 3rem;
        }
    }
</style>
